<template>
  <div style="padding: 20px">
    <el-card>
      <el-form class="search-form" :inline="true">
        <el-form-item>
          <el-input placeholder="根据用户名搜索" v-model="msg"></el-input>
        </el-form-item>
        <el-button size="small" @click="msg=''">清除</el-button>
        <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          style="float: right"
          size="small"
          @click="add"
          >新增权限组</el-button
        >
      </el-form>
      <el-alert
        :title="`共 ${counts} 条记录`"
        type="info"
        show-icon
        style="margin: 20px 0"
        :closable="false"
      ></el-alert>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#fafafa',
          borderBottom: '2px solid #e8e8e8',
        }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="create_date" label="日期" sortable width="733">
          <template #default="{ row }">
            <span>{{ row.create_date | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="getDetail(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="open(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="sizes"
          :page-size="params.size"
          layout="  prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog :title="changeTitle" :visible.sync="addDialog" width="50%" @close="dialogClose">
      <el-form label-width="230px" :model="addForm" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="title">
          <el-input style="width:280px" v-model.trim="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配" prop="permissions">
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[0]"
            :props="defaultProps"
            style="margin-top:15px;"
            ref="trees"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, detail, update } from '@/api/base/permissions'
import { listTree } from '@/utils'
import { menusList } from '@/api/base/menus'
export default {
  data () {
    return {
      tableData: [],
      params: {
        page: 1,
        pagesize: 10
      },
      counts: 0,
      sizes: [10, 20, 30, 50],
      addDialog: false,
      addForm: {
        title: '',
        permissions: []
      },
      rules: {
        title: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      },
      treeData: [
        { id: 0, title: '系统菜单和页面权限点', code: '系统菜单和页面权限点', childs: [] }
      ],
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      changeTitle: '',
      msg: ''
    }
  },
  created () {
    this.getList()
    this.menusList()
  },
  methods: {
    // 表格列表
    async getList () {
      const { data } = await list(this.params)
      console.log(data)
      this.tableData = data.list
      this.counts = data.counts
    },
    // 树状结构
    async menusList () {
      const { data } = await menusList()
      console.log(data)
      this.treeData[0].childs = listTree(data)
      console.log(this.treeData)
    },
    handleCurrentChange (current) {
      this.params.page = current
      this.getList()
    },
    handleSizeChange (size) {
      this.params.pagesize = size
      this.getList()
    },
    // 删除
    async open (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.$message.success('删除成功!')
        this.getList()
      } catch (error) {
        this.$message.info('已取消操作!')
        console.log(error)
      }
    },
    // 新增
    add () {
      this.addForm = {
        title: '',
        permissions: []
      }
      this.changeTitle = '创建权限组'
      this.addDialog = true
    },
    // 关闭dialog
    dialogClose () {
      // if (this.changeTitle === '创建权限组') {
      this.$refs.form.resetFields()
      this.$refs.trees.setCheckedKeys([])
      // }
    },
    // 确认新增
    async addConfirm () {
      try {
        await this.$refs.form.validate()
        this.addForm.permissions = (this.$refs.trees.getCheckedKeys())
        if (!this.addForm.permissions.length) return this.$message.warning('请选择权限分配')
        // 新增
        if (this.changeTitle === '创建权限组') {
          await add(this.addForm)
          this.$message.success('新增权限组成功')
        // 编辑
        } else {
          await update(this.addForm)
          this.$message.success('修改权限组成功')
        }
        this.getList()
        this.addDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑回显
    async getDetail (row) {
      this.changeTitle = '编辑权限组'
      const { data } = await detail(row)
      this.addForm = data
      // console.log(this.addForm.permissions)
      this.$nextTick(() => {
        this.$refs.trees.setCheckedKeys(this.addForm.permissions)
      })
      this.addDialog = true
    },
    // 查询
    async onSearch () {
      this.params.title = this.msg
      const { data } = await list(this.params)
      console.log(data)
      this.getList()
    }

  }
}
</script>

<style scoped lang='scss'>
::v-deep .search-form {
  height: 33px;
  .el-input--medium .el-input__inner {
    position: relative;
    top: -2px;
    height: 32px;
    line-height: 32px;
    .el-button {
      height: 32px;
    }
  }
}
</style>
